<template>
	<view class="my_money">
		<view class="top_nav" @tap="jumpNext">
			<view style="display: flex;align-items: center;">
				<uni-iconfont :name="icons" :color="colors" size="45"></uni-iconfont>
				<view style="margin-left: 15upx;"><text class="name"><slot></slot></text></view>
			</view>
			  <view class="right_icon" v-if="rightshow == true">
				  <uni-iconfont name="arrow-right" size="30"></uni-iconfont>
			  </view>
		</view>
		
		<view class="server_box">
		  <view v-for="(item, index) in serverList" :key="index" class="server_list" @tap="jumpLink(item)">
		    <view>
			   <uni-iconfont :name="item.icon" :color="item.colors" size="45"></uni-iconfont>
		    </view>
		    <view class="server_text">
		      {{item.name}}
		    </view>
		  </view>
		</view>
	</view>

</template>

<script>
    import uniIconfont from '@/components/uni-iconfont/index'

export default {
	name:"zetank-wode-server",
  	data() {
  	  return {};
  	},
  	components: {
	    uniIconfont
	},
	props: {
	  icons: {
	    type: String
	  },
	  linkUrl: {
	    type: String //跳转的页面地址
	  },
	  colors: {
	    type: String,
		  default:'#4baed5'
	  },
	  rightshow: {
	    type: Boolean,
	    default: true
	  },
		serverList: {
		  type: Array,
		  default:[{
			name: '报名审核',
			icon: 'file-text-fill',
			url: './enrollcheck',
			id: 0,
			elseUrl: ''
		}]
		},
  },
  methods: {
    jumpNext() {
      console.log(this.linkUrl);
      if (this.linkUrl && this.linkUrl !== '') {
        uni.navigateTo({
          url: this.linkUrl
        });
      }
    },
	  jumpLink(item) {
	  	if (item.url) {
            uni.navigateTo({
                url: item.url
            });
		} else {
	  	    this.$emit('linkClick', item)
		}
	},
  }
};
</script>
<style scoped lang="scss">
.top_nav {
  line-height: 60upx;
  padding: 20upx 30upx;
  display: flex;
  align-items: baseline;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.top_nav::after {
  position: absolute;
  left: 30upx;
  right: 0;
  height: 0;
  content: '';
  bottom: 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  border-bottom: 1px solid #E4E7ED;
}

.top_nav:active {
  background-color: #fafafa;
}

.top_nav .icon {
  align-self: center;
  width: 56upx;
  max-height: 60upx;
  font-size: 38upx;
}

.top_nav .name {
  flex: 1;
  font-size: 34upx;
  color: #303133;
}

.top_nav .right_icon {
  float: right;
  width: 40upx;
  // height: 40upx;
  align-self: center;
}

.my_server {
  background-color: #fff;
  margin-bottom: 20upx;
}

.server_box {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 30upx;
}
.server_box::after{
  width: 25%;
  content: '';
  border:1px solid transparent;
}
.server_list {
  max-width: 25%;
  min-width: 25%;
  text-align: center;
  margin-top: 30upx;
}
.server_list:active{
  opacity: 0.8;
}
.server_list text{
  font-size: 56upx;
  line-height: 60upx;
  display: inline-block;
}
.server_text{
  font-size: 28upx;
  color: #3c3c3c;
  /*margin-top: 15upx;*/
}
.my_money {
  background-color: #fff;
  margin-bottom: 20upx;
	border-radius: 15rpx;
}
</style>